<template>
    <div class="login-container">
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="arrow-left" size="24" color="gray" />
            </template>
        </van-nav-bar>
        <div class="login-form">
            <van-form @submit="onSubmit">
                <van-cell-group inset class="login-panel">
                    <h1>账号登录</h1>
                    <van-cell title="用户名" class="label-cell" :border="false" />
                    <van-field v-model="username" left-icon="user" name="username" placeholder="请输入用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-cell title="密码" :type="password" class="label-cell" :border="false">
                        <template #right-icon>
                            <span class="forgot-password" @click="onForgotPassword">忘记密码？</span>
                        </template>
                    </van-cell>
                    <van-field v-model="password" type="password" left-icon="lock" name="password" clearable placeholder="请输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]">
                    </van-field>
                    <div class="login-options">
                        <van-checkbox v-model="rememberMe">记住我</van-checkbox>
                        <span class="register-link" @click="onRegister">注册新账号</span>
                    </div>
                    <div style="margin-top: 30px;">
                        <van-button style="border-radius: 10px;" color="#4f46e5" block type="primary"
                            native-type="submit">
                            登录
                        </van-button>
                    </div>
                    <div class="divider">
                        <span class="divider-text">其他登录方式</span>
                    </div>
                    <div class="social-login">
                        <van-button class="social-btn wechat-btn" block @click="loginby">
                            <template #icon>
                                <van-icon name="wechat" color="white" />
                            </template>
                            微信
                        </van-button>
                        <van-button class="social-btn alipay-btn" block>
                            <template #icon>
                                <van-icon name="alipay" color="white" @click="loginby"/>
                            </template>
                            支付宝
                        </van-button>
                    </div>
                </van-cell-group>
            </van-form>
            <div class="mt-4 text-center text-sm text-gray-600">
                <p>登录即表示您同意我们的 <a href="#" class="text-indigo-600 hover:text-indigo-500">服务条款</a> 和 <a href="#"
                        class="text-indigo-600 hover:text-indigo-500">隐私政策</a></p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import network from '../network'
import { showToast } from 'vant'

const router = useRouter()
const username = ref('')
const password = ref('')
const rememberMe = ref(false)

const onClickLeft = () => {
    router.push('/')
}

const onSubmit = (values: any) => {
    network.login({ username: username.value, password: password.value })
        .then(function (res) {
            localStorage['user_info'] = JSON.stringify(res.data.data);
            router.push('/');
        }
        )
        .catch(function (error) {
            console.error('登录失败:', error);
        });
}

const loginby = () => {
    showToast('假的...');
}

const onForgotPassword = () => {
    router.push('/Mforgot-password')
}

const onRegister = () => {
    router.push('/Mregister')
}
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.login-form {
    padding: 20px;
}

.login-panel {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 30px;
    background: #fff;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
}

.label-cell {
    padding: 0px;
    padding-top: 16px;
}

:deep(.van-cell__title) {
    text-align: left;
    font-size: 16px;
    color: #333;
}

:deep(.van-field) {
    border: 1px solid #dcdee0;
    border-radius: 20px;
    padding-left: 10px;
}

:deep(.van-field__control) {
    padding-left: 10px;
}

:deep(.van-cell::after) {
    display: none;
}

:deep(.van-cell-group--inset) {
    margin: 0;
}

:deep(.van-field__error-message) {
    position: static;
    margin-top: 4px;
    padding-left: 10px;
    color: #ee0a24;
    font-size: 12px;
}

:deep(.van-field--error) {
    border-color: #ee0a24;
}

.forgot-password {
    color: #4f46e5;
    font-size: 14px;
    cursor: pointer;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    padding: 0;
}

.register-link {
    color: #4f46e5;
    font-size: 14px;
    cursor: pointer;
}

.divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #dcdee0;
}

.divider-text {
    position: relative;
    background-color: #fff;
    padding: 0 12px;
    color: #666;
    font-size: 14px;
}

.social-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.social-btn {
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
}

.wechat-btn {
    background-color: #07c160;
    border-color: #07c160;
}

.alipay-btn {
    background-color: #1677ff;
    border-color: #1677ff;
}

:deep(.van-checkbox__label) {
    color: #666;
    font-size: 14px;
}
</style>